<template>
  <view class="textContainer">
    <view class="textTitle">
      <view class="titleFlag"></view><text>{{ title }}</text>
    </view>
    <view class="majorList" v-if="major.length > 0">
      <view
        class="major"
        v-for="item in major.slice(0, 8)"
        :key="item.positionTagId"
        ><text>{{ item.tagName }}</text></view
      >
    </view>
    <view v-else class="emptyLoading">
      <u-loading mode="circle" size="50" v-if="loading"></u-loading>
      <Empty
        v-else
        :baseImg="emptyImg"
        text="暂无数据"
        :fontWeight="400"
        textColor="#bfbfbf"
        class="empty"
        spacing="0"
      />
    </view>
  </view>
</template>
<script>
import Empty from '@/components/Empty.vue';
// import { getLayerDetailsData } from "@/api/modules/career";
export default {
  props: {
    positionId: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    layerId: {
      type: String,
      default: null
    },
    major: {
      type: Array,
      default: []
    }
  },
  components: {
    Empty
  },
  data() {
    return {
      loading: false,
      emptyImg: this.$imgBaseSelf + 'common/empty.png'
      // major: [],
    };
  },
  mounted() {},
  methods: {}
};
</script>
<style scoped lang="scss">
.textContainer {
  margin: 24rpx 32rpx 0 32rpx;
  padding: 40rpx 34rpx 44rpx 34rpx;
  background: #ffffff;
  border-radius: 24rpx;

  .textTitle {
    display: flex;
    align-items: center;
    font-size: 30rpx;
    font-family: PingFang-SC-Heavy, PingFang-SC;
    font-weight: 800;
    color: #222222;
    line-height: 44rpx;

    .titleFlag {
      width: 8rpx;
      height: 36rpx;
      border-radius: 64rpx;
      background-color: #f75a3e;
      margin-right: 16rpx;
    }
  }

  .majorList {
    display: flex;
    width: 100%;
    flex-wrap: wrap;

    .major {
      padding: 10rpx 24rpx;
      margin-right: 16rpx;
      margin-top: 16rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #222222;
      background: #f6f6f6;
      border-radius: 14rpx;
      display: flex;
      min-width: 0;
      align-items: center;
      justify-content: center;

      text {
        overflow: hidden;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
  }
}
.emptyLoading {
  height: 450rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
